<template>
  <!-- 合纵119盟友倾情连线 -->
  <div class="allyConnect">
    <div class="title">
      <img src="../assets/img/119盟友连线title.png" alt="" />
    </div>
    <ul>
      <li v-for="(v,i) in dataList" :key='i'>
        <p class="color97">{{v.name}}</p>
        <div class="bgImg">
            <span>￥</span>{{v.gmv}}
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import url from "../api/apiUrl";
import { getRequest } from "../api/indexGet";
export default {
  data() {
    return {
      dataList: [],
      totalAxios:null,
    };
  },
  created() {
    this.getList();
    this.intervalAxios()
  },
  methods: {
    async getList() {
      let res = await getRequest(url.allyGmv);
      if (res.data.code == "000000") {
        this.dataList = res.data.content;
        this.dataList.map(obj=>{
          obj.gmv=this.$parent.toThousands(obj.gmv)
        })
      }
    },
    // 2s请求一次
    intervalAxios(){
      this.totalAxios=setInterval(()=>{
        this.getList()
      },4000)
    }
  },
  destroyed(){
    clearInterval(this.totalAxios)
  }
};
</script>

<style lang="less" scoped>
.allyConnect {
  // margin-right: 97px;
  .title {
    margin-top: -100px;
  }
  ul {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 363px;
    li {
      width: 151px;
      text-align: center;
      .color97 {
        font-size: 16px;
        margin: 9px 0 4px 0;
      }
      .bgImg {
        width: 100%;
        height: 32px;
        background: url("../assets/img/盟友销量bg.png") no-repeat center;
        color: #22E3FF;
        font-size: 18px;
        font-weight: bold;
        line-height: 32px;
        span{
            font-size: 12px;
        }
      }
    }
  }
}
</style>